import * as React from 'react';
import { IconButton } from 'office-ui-fabric-react';
import { OverflowSetCustom } from '..';
import { openDialog } from '../../utils/WordDialog';
import './index.less'

export interface Props {
  title?: string;
  content?: string; // 插入内容到word
  menuProps?: any;
  hideMenu?: any;
}

export default class ParagraphCardTitle extends React.Component<Props> {
  defaultMenu = () => {
    return {
      items: [
        {
          key: 'view',
          text: '预览',
          iconProps: {
            iconName: 'View',
          },
          onClick: () => {
            openDialog('https://localhost:3000/', () => { })
            return;
          }
        },
        {
          key: 'download',
          text: '插入word',
          iconProps: {
            iconName: 'Download',
          },
          onClick: () => {
            console.log('插入')
            this.insertHTML(this.props.content)
            return;
          }
        }
      ]
    }
  }
  render() {
    const {
      title,
      hideMenu,
      children,
      menuProps = this.defaultMenu()
    } = this.props;

    return (
      <div className="ms-clearfix paragraph-card-title ms-bgColor-neutralLight">
        <div className="text" dangerouslySetInnerHTML={{ '__html': title }}>{children && children}</div>
        {
          hideMenu ? '' : (
            <div className="operate">
              <IconButton
                data-automation-id="test"
                iconProps={{ iconName: 'More' }}
                text="更多操作"
                menuProps={menuProps}
              />
            </div>
          )
        }
      </div>
    );
  }

  // overflowSetItems = (): any[] => [
  //   {
  //     key: 'newItem',
  //     name: '预览',
  //     icon: 'View',
  //     ariaLabel: 'New. Use left and right arrow keys to navigate',
  //     onClick: () => {
  //       openDialog('https://localhost:3000/', 70, 50)
  //       return;
  //     }
  //   },
  //   {
  //     key: 'download',
  //     name: '加入',
  //     icon: 'Download',
  //     ariaLabel: 'New. Use left and right arrow keys to navigate',
  //     onClick: () => {
  //       this.insertHTML(this.props.content)
  //       return;
  //     }
  //   },
  // ]

  insertHTML = (html) => {
    Word.run(function (context) {
      const blankParagraph = context.document.body.paragraphs.getLast().insertParagraph("", "After");
      blankParagraph.insertHtml(html, "End");
      return context.sync();
    }).catch(function (error) {
      console.log('Error:' + error);
      if (error instanceof OfficeExtension.Error) {
        console.log("Debug info: " + JSON.stringify(error.debugInfo));
      }
    });
  }
}


/*
        <div className="title ms-bgColor-neutralLight">
          <div className="text">{title}</div>
          <div className="operate">
            <OverflowSetCustom
              overflowItems={this.overflowSetItems()}
            // items={
            //   [
            //     {
            //       key: 'newItem',
            //       name: '加入',
            //       iconName: 'download',
            //       ariaLabel: 'New. Use left and right arrow keys to navigate',
            //       onClick: () => {
            //         this.insertHTML(this.props.content)
            //         return;
            //       },
            //     }
            //   ]
            // }
            />
            <IconButton
              data-automation-id="test"
              iconProps={{ iconName: 'More' }}
              text="Create account"
              // onClick={alertClicked}
              // split={true}
              // aria-roledescription={'split button'}
              // styles={customSplitButtonStyles}
              menuProps={{
                items: [
                  {
                    key: 'emailMessage',
                    text: 'Email message',
                    iconProps: {
                      iconName: 'Mail',
                      onClick: () => {
                        this.insertHTML(this.props.content)
                        return;
                      },
                    }
                  },
                  {
                    key: 'calendarEvent',
                    text: 'Calendar event',
                    iconProps: { iconName: 'Calendar' }
                  }
                ]
              }}
            />
          </div>
        </div>
    */
